<template>
  <div class="sort">
		<div class="sortName">分类</div>
		<div class="sortContent">
				<div class="sortBoxOne">
					<div class="sortBox"  @mouseenter="enter(item)" @mouseleave="leave(item)" v-for="(item,index) in sortOne" :key="index">
						<div class="itemBox">
							<div class="sortItemName" :class="{itmeColorHover:item.id==isBgimg}">{{item.name}}</div>
							<div class="sortTitle" :class="{itmeColorHover:item.id==isBgimg}">{{item.title}}</div>
							<div class="sortBtn" :class="{sortBtnColor:item.id==isBgimg,sortBtnColorOk:item.id==isBgBtn}" @mouseenter="enterBtn(item)" @mouseleave="leaveBtn(item)">了解{{item.name}}</div>
						</div>
						<transition name="fade">
							<img v-if="isBgimg==item.id" class="itemImg" translate="fade" :src="item.img" alt="">
						</transition> 					
					</div>
 				</div>
				<div class="sortBoxTwo">
					<div class="sortBox" @mouseenter="enter(item)" @mouseleave="leave(item)" v-for="(item,index) in sortTwo" :key="index">
						<div class="itemBox">
							<div class="sortItemName" :class="{itmeColorHover:item.id==isBgimg}">跑腿{{item.name}}</div>
							<div class="sortTitle" :class="{itmeColorHover:item.id==isBgimg}">{{item.title}}</div>
							<div class="sortBtn" :class="{sortBtnColor:item.id==isBgimg,sortBtnColorOk:item.id==isBgBtn}"   @mouseenter="enterBtn(item)" @mouseleave="leaveBtn(item)">了解{{item.name}}</div>
						</div>
						<transition name="fade">
							<img v-if="isBgimg==item.id" class="itemImg" translate="fade" :src="item.img" alt="">
						</transition>
					</div>
				</div>
		</div>
  </div>
</template>
<script>
    export default {
			name:'sort',
			data(){
				return{
					sortOne:[],
					sortTwo:[],
					isBgimg:'',
					isBgBtn:''
				}
			},
			mounted(){
				this.getSortData();
			},
			methods:{
				getSortData(){
					this.$http.get("static/homeList.json").then(res => {
 						res.data.homeList.forEach(element => {
							element.type=='one'? this.sortOne.push(element):this.sortTwo.push(element);
						});
					});
				},
				enter(o){
					this.isBgimg = o.id;				 
 				},
				leave(o){
					this.isBgimg = '';
				},
				enterBtn(o){
					this.isBgBtn = o.id;
				},
				leaveBtn(o){
					this.isBgBtn = '';
				}
			}   
    }
</script>
<style>
	.fade-enter-active, .fade-leave-active {
 		transition: opacity 1s
  }
	.fade-enter, .fade-leave-active {
    opacity: 0
  }

	.sort {
	 	margin: 20px 0;
		margin-bottom: 75px;
 	}
	.sort .sortName {
		line-height: 50px;
		margin: 20px 0 50px 0;
		text-align: center;
		font-size: 18px;
		color: rgb(51, 51, 51)
	}
	.sortContent .sortBoxOne {
		width: 730px;
 		height: 250px;
		margin: 0 auto;
		margin-bottom:20px; 
 	}
	.sortBoxOne .sortBox,.sortBoxTwo .sortBox {
		position: relative;
		display: inline-block;
		width: 365px;
		height: 250px;
		background: #fff;
		float: left;
		box-shadow: 0px 0px 20px #ccc;
		text-align: center;
	}
	.sortBox .itemBox {
		width: 100%;
		height: 100%;
		position: absolute;
		z-index: 1000;
	}
	.sortBox .itemImg {
		width: 100%;
		height: 100%;
		position: absolute;
		top: 0;
		left: 0;
		z-index: 999;
	}
	.sortContent .sortBoxTwo {
		width: 1095;
 		height: 250px;
		margin: 0 auto;
		margin-bottom:20px; 
 	}
	.sortItemName {
		margin: 35px 0 40px 0;
		color: rgb(51, 51, 51);
		font-size: 18px;
	}
	.sortTitle {
		margin: 30px 0;
		color: rgb(51, 51, 51);
		font-size: 16px;
	}
	.sortBtn {
		display: inline-block;
		width: 150px;
		line-height: 36px;
		color: rgb(254, 254, 254);
		border-radius: 30px;
		background:url('/static/img/btn-unclick.png');
		font-size: 18px;
		cursor: pointer;
	}
	.sortBox .itmeColorHover{
		color: rgb(254, 254, 254);
	}
	.sortBtnColor {
		background:url('/static/img/un.png');
		border: 2px solid rgb(254, 254, 254);
	}
	.sortBtnColorOk {
		background:url('/static/img/btn-unclick.png');
		border: 0 solid rgb(254, 254, 254);
	}
</style>















